<template>
  <!--视图-->
  <div>
    <template>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-table
              :data="tableData"
              border
              style="width: 100%">
            <el-table-column
                fixed
                prop="createTime"
                label="创建时间"
                width="150">
              <template v-slot="r">
                <span class="blue-text">{{r.row.createTime}}</span><br>
                订单号:<span class="blue-text">{{r.row.orderId}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="uname"
                label="用户名"
                width="160">
              <template v-slot="r">
                <span style="text-align: center">{{r.row.uname}}</span><br>
                手机号:<span class="blue-text">{{r.row.phone}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="days"
                label="取还车时间"
                width="150">
              <template v-slot="r">
                <i class="el-icon-truck" style="color: red">取车</i>:<span style="text-align: center;color: red" >{{r.row.beginTime}}</span><br>
                <i class="el-icon-truck" style="color: green">还车</i>:<span class="blue-text" style="color: green">{{r.row.endTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="days"
                label="租期天数"
                width="300">
              <template v-slot="r" >
                {{r.row.days}}天
              </template>
            </el-table-column>
            <el-table-column
                prop="subtotal"
                label="支付金额"
                width="120">
              <template v-slot="r" >
                ¥{{r.row.subtotal}}
              </template>
            </el-table-column>

            <el-table-column
                prop="pay"
                label="押金金额"
                width="120">
            </el-table-column>
            <el-table-column
                prop="status"
                label="订单状态"
                width="120">
              <template v-slot="r">
                <el-tag type="warning" v-if="r.row.status==1">待取车</el-tag>
                <el-tag type="success" v-if="r.row.status==2">已取车</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="getquche(scope.row)" type="primary">取车</el-button><br>
                <el-button :disabled="isDisabled" align="center" @click="handleClick2(scope.row)">取消订单</el-button><br>
                <el-button :disabled="isDisabled" align="center">订单日志</el-button>

                <el-button @click="chakan(scope.row)" type="primary">查看详情</el-button><br>
              </template>
            </el-table-column>
          </el-table>

          <el-dialog title="取车" :visible.sync="dialogFormVisible">
            <div class="bordered-div">
              <el-descriptions title="订单详情">
                <el-descriptions-item label="类型:">个人/企业</el-descriptions-item>
                <el-descriptions-item label="车辆号:">京AXXXXXX</el-descriptions-item>
                <el-descriptions-item label="车型:">xxxxxx</el-descriptions-item>
                <el-descriptions-item label="客户姓名:">
                  <el-tag size="small">{{form.uname}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="身份证号:">xxxxxxxxxxxxxxxxxx</el-descriptions-item>
                <el-descriptions-item label="车辆颜色:">白色</el-descriptions-item>
                <el-descriptions-item label="联系电话:">{{form.phone}}</el-descriptions-item>
                <el-descriptions-item label="承租时间:">{{form.createTime}}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="border-top: 1px solid #eaeaea; padding-top: 10px;" class="bordered-div">

              <el-descriptions title="支付订单" >
                <el-descriptions-item label="支付金额">￥<span style="color: red">{{this.form.subtotal}}</span></el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  <el-radio  v-model="form1.pay" label="1">现金</el-radio>
                  <el-radio  v-model="form1.pay"  label="2">银行卡</el-radio>
                  <el-radio   v-model="form1.pay"  label="3">微信</el-radio>
                  <el-radio  v-model="form1.pay"  label="4" >支付宝</el-radio>
                  <el-radio   v-model="form1.pay"  label="5">其他</el-radio>
                </el-descriptions-item>
              </el-descriptions>

            </div>
            <div style="border-top: 1px solid #eaeaea; padding-top: 10px;" class="bordered-div">
              <el-descriptions title="押金订单">
                <el-descriptions-item label="押金金额">￥<span style="color: red">{{this.form.money}}</span></el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  <el-radio v-model="form1.type" label="1">现金</el-radio><br/>
                  <el-radio v-model="form1.type" label="2">银行卡</el-radio><br/>
                  <el-radio v-model="form1.type" label="3">微信</el-radio><br/>
                  <el-radio v-model="form1.type" label="4">支付宝</el-radio><br/>
                  <el-radio v-model="form1.type" label="5">其他</el-radio>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <el-descriptions title="车身描述" column="1">
              <el-descriptions-item label="用户名">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                   >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" style="border: 1px solid #000;">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #000;"></i>
                </el-upload>
              </el-descriptions-item>
              <el-descriptions-item  label="图片说明">
                <el-input v-model="form1.desc" placeholder="请输入内容"></el-input>
              </el-descriptions-item>

              <el-descriptions-item  label="备注说明">
                <el-input v-model="form1.remark" placeholder="请输入内容"></el-input>
              </el-descriptions-item>
            </el-descriptions>



            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" class="cancel-btn">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false" class="confirm-btn">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <div class="chart-container" id="main" style="width: 594px;height: 500px;"></div>


        <el-tab-pane label="今日取车" name="second"></el-tab-pane>
        <el-tab-pane label="今日换车" name="third"></el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
      </el-tabs>
    </template>

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "CarRenvitis",
  data() {//属性
    return {
      form1:{
        pay:'4',
        type:'4',
      },
      tableData:[],
      activeName: 'first',
      form:{

      },
      dialogFormVisible:false,
      formLabelWidth:'120px',
      imageUrl:""
    }
  }, methods: {//自定义方法
    chakan(scope)
    {
      this.$router.push({name: 'test', params: { data: scope },});
    },
     getquche(scope)
     {
       this.dialogFormVisible=true;
       console.log(this.form.pay)
       this.form=scope;

     },
     list()
     {
       this.axios.post("/carren/list").then(res=>{
         this.tableData=res.data.data
       })
     },
    zhu(parse)
    {
      console.log(parse)
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;
      let xData=[]
      let yData=[]
      parse.forEach(item=>{
        xData.push(item.ydate)
        yData.push(item.xdate)
      })
      option = {
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yData,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    init()
    {
      const self = this;
      this.ws = new WebSocket("ws://localhost:10020/websocket");
      this.ws.onmessage=function (res) {
        let parse = JSON.parse(res.data);
        self.zhu(parse)
      }
      this.ws.onopen=function () {
        console.log("连接成功")


      }
      this.ws.onclose=function () {
        console.log("连接关闭")
      }
    },
  }, created() {
    this.list()
    this.init();
    this.zhu();
  },mounted() {

  }
}
</script>

<style scoped>
.blue-text {
  color: blue;
}
.form-section {
  padding: 15px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.order-form {
  margin-bottom: 15px;
}
.payment-options {
  margin-top: 10px;
}
.cancel-btn {
  margin-right: 10px;
}
.confirm-btn {
  background-color: #409EFF;
  color: white;
}
.bordered-div {
  border: 1px solid rgba(125, 131, 136, 0.5); /* 设置边框为 1 像素宽的黑色实线 */
  padding: 10px; /* 设置内边距为 10 像素 */
  border-radius: 5px; /* 设置边框圆角为 5 像素 */
  margin-bottom: 10px; /* 设置下边距为 10 像素 */
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


.chart-container {
  width: 800px;
  height: 600px;
  background-color: #333;
  color: #fff;
}
</style>
